<template>
  <uni-popup ref="passengerRules" type="bottom" background-color="reba(240, 242, 248,1)"
             border-radius="50rpx 50rpx 50rpx 50rpx" style="height: 80%">
    <view class="show-popup">
      <view class="popup-title">
        <view class="label">请选择乘车人</view>

        <uni-icons type="closeempty" style="position: absolute;right: 20rpx;top: 20rpx" :size="20"
                   @tap="closePopup"></uni-icons>
      </view>
      <view style="background: #FFFFFF">
        <view style="padding: 25rpx">
          <navigator :url="'/pagesA/product/addPassengers?uid='+userinfo.id">
            <button type="primary">手动新增</button>
          </navigator>
        </view>
        <uni-list>
          <uni-list-item v-for="item in list" :title="item.passengerName" :note="'手机号 ' +item.passengerTel"
                         @click="chosePassengers(item)" clickable :key="item.id">
            <template v-slot:header>
              <view class="slot-box">
                <uni-data-checkbox v-model="choseCheckBox" :localdata="[{text:'',value:item.id}]"></uni-data-checkbox>
              </view>
            </template>
            <!--          <template v-slot:body>-->
            <!--            <text class="slot-box slot-text">item</text>-->
            <!--          </template>-->
            <template v-slot:footer>
              <view class="slot-box">
                <uni-icons type="gear" @click="editPassenger(item)"/>
              </view>
            </template>
          </uni-list-item>
        </uni-list>
        <uni-load-more :status="status" :content-text="contentText" clickLoadMore="clickLoadMore"/>
      </view>
    </view>

  </uni-popup>
</template>

<script>
import {getPassengerList} from "@/utils/api/basics";
import util from "@/uni_modules/uni-calendar/components/uni-calendar/util";

export default {
  props: ['passenger','userinfo'],
  destroyed() {
    uni.$off('updatePassengers')
  },
  created() {
    uni.$on('updatePassengers', () => {
      this.init()
    })
  },
  data() {
    return {
      choseCheckBox: '',
      pageNum: 1,
      list: [{
        id: 1,
        passengerName: '啊三',
        passengerTel: '13667377652',
      }, {
        id: 2,
        passengerName: '啊四',
        passengerTel: '19821648472',
      }],
      status: 'nomore',
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中',
        contentnomore: '已展示所有本次加载的所有旅客'
      }
    };
  }, methods: {
    editPassenger(item) {
      uni.navigateTo({
        url: `/pagesA/passengers/addPassenger?id=${item.id}&passengerName=${item.passengerName}&passengerTel=${item.passengerTel}&uic=${item.id}`
      })
    },
    init() {
      getPassengerList({
        uid: this.userinfo.id,
        pageNum: this.pageNum,
        pageSize: 5
      }).then(res => {
        if (res.data.code == 200) {
          if (this.pageNum < res.data.total / 5) {
            this.status = 'more'
            this.pageNum = this.pageNum + 1
          } else {
            this.status = 'nomore'
          }
          this.list = res.data.rows
        } else {
          this.status = 'nomore'
        }
      }).catch(res => {
        this.status = 'nomore'
      })
    },
    chosePassengers(item) {
      this.$emit('update:passenger', item)
      this.choseCheckBox = item.id
      this.closePopup()
    },
    clickLoadMore() {
      this.status = 'loading'
      // 获取乘车信息
      getPassengerList({
        uid: this.userinfo.id,
        pageNum: this.pageNum,
        pageSize: 5
      }).then(res => {
        if (res.data.code == 200) {
          if (this.pageNum < res.data.total / 5) {
            this.status = 'more'
            this.pageNum = this.pageNum + 1
          } else {
            this.status = 'nomore'
          }
          this.list = res.data.rows
        } else {
          this.status = 'nomore'
        }
      }).catch(res => {
        this.status = 'nomore'
      })
    },
    open() {
      this.pageNum = 1
      this.clickLoadMore()
      this.$refs.passengerRules.open()
    },
    closePopup() {
      this.$refs.passengerRules.close()
    }
  }
}
</script>

<style lang="scss">
.show-popup {
  position: relative;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #f0f2f8;
  height: 80vh;

  //.flex-item {
  //  //flex: 1;
  //  height: 100vh;
  //}

  .popup-title {
    height: 5vh;
    text-align: center;
    border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(to bottom, #d9f2fc, #fff);
  }
}

button[type=primary] {
  background: #007aff;
}

.slot-box {
  margin: 0;
  display: flex;
  align-items: center;
}
</style>
